<template>
	<view>
		<uni-popup
			ref="searchList"
			@maskClick="closePopup"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view v-if="showSearch">
						<uni-search-bar
							@confirm="confirmSearch"
							@input="inputSearch"
							cancelButton="none"
							:value="searchvalue"
							placeholder="请输入搜索内容"
						></uni-search-bar>
					</view>
					<scroll-view
						scroll-y="true"
						:class="
							showSearch ? 'scroll-height' : 'scroll-height-2'
						"
						lower-threshold="30"
						@scrolltolower="loadMore"
					>
						<view v-if="type === 'list'">
							<radio-group
								@change="chooseRadio"
								v-if="dataList && dataList.length > 0"
							>
								<label
									class="df jsb lh100 f36 g3 bd-bottom-e"
									v-for="(item, index) in dataList"
									:key="index"
								>
									<view class="w90">{{ item.label }}</view>
									<view class="w10"
										><radio
											:value="item.value"
											:checked="
												chooseVal &&
												chooseVal === item.value
											"
											color="#2b58de"
										></radio
									></view>
								</label>
							</radio-group>
							<diy-empty v-else></diy-empty>
						</view>
						<view v-if="type === 'block'" class="df fx-wp">
							<view
								class="item-cont f36"
								v-for="(item, index) in dataList"
								:key="index"
								:class="
									item.value === chooseVal
										? 'item-active'
										: ''
								"
								@tap="chooseBlock(item)"
							>
								{{ item.label }}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="popup-bottom pt20">
					<button
						class="primary-button w100 ml20 mr20"
						@tap="submitChoose()"
					>
						确认选择
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	emits: ['submit', 'close', 'search'],
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '请选择',
		},
		value: {
			type: [Number, String],
			default: '',
		},
		localData: {
			type: Array,
			default() {
				return []
			},
		},
		type: {
			type: String,
			default: 'list', //list 列表, block 块儿
		},
		showSearch: {
			type: Boolean,
			default: true,
		},
		popupHeight: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			dataList: [],
			scrollHeight: 0,
			pageSize: 20,
			pageIndex: 1,
			searchvalue: '',
			chooseVal: '',
			chooseData: null,
		}
	},
	mounted() {},
	methods: {
		//打开弹窗
		openPopup() {
			this.countScrollHeight()
			this.dataList = this.localData
			this.searchvalue = ''
			this.pageIndex = 1
			this.chooseVal = this.value
			this.chooseData = null
			this.emitSearch()
			this.$refs.searchList.open('bottom')
		},
		//关闭弹窗
		closePopup() {
			this.$refs.searchList.close()
			this.$emit('close')
		},
		//确认搜索
		confirmSearch(event) {
			this.searchvalue = event.value
			this.pageIndex = 1
			this.emitSearch()
		},
		//输入搜索
		inputSearch(value) {
			this.searchvalue = value
			this.pageIndex = 1
			this.emitSearch()
		},
		//中间滚动框高度
		countScrollHeight() {
			let reg = /[^\d]/g
			let regStr = /[^a-zA-Z]/g
			if (this.popupHeight) {
				let popupNum = parseInt(this.popupHeight.replace(reg, ''))
				let popupStr = this.popupHeight.replace(regStr, '')
				this.scrollHeight = popupNum - 100 - 160
			} else {
				this.scrollHeight = 1100 - 100 - 160
			}
			if (this.showSearch) {
				this.scrollHeight = this.scrollHeight - 100
			}
		},
		//列表选中
		chooseRadio(event) {
			this.chooseVal = parseInt(event.detail.value)
		},
		//方块选中
		chooseBlock(item) {
			this.chooseVal = item.value
		},
		//加载更多
		loadMore() {
			this.pageIndex = this.pageIndex + 1
			this.emitSearch()
		},
		//调用搜索方法
		emitSearch() {
			this.$emit(
				'search',
				this.searchvalue,
				this.pageIndex,
				this.pageSize
			)
		},
		//调用确认方法
		emitSubmit() {
			this.$emit('submit', this.chooseData)
		},
		//确认选择
		submitChoose() {
			if (this.chooseVal !== null) {
				this.chooseData = this.dataList.find(
					(res) => res.value === this.chooseVal
				)
				this.emitSubmit()
				this.closePopup()
			} else {
				this.chooseData = null
				this.emitSubmit()
				this.closePopup()
			}
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
		value(val) {
			if (val) {
				this.chooseVal = val
			}
		},
		localData: {
			immediate: true,
			handler(val, old) {
				if (Array.isArray(val) && old !== val) {
					this.dataList = val
				}
			},
		},
	},
}
</script>

<style scoped lang="scss">
.item-cont {
	border: 2rpx #dddddd solid;
	padding: 20rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}
.item-active {
	border: 2rpx $primary-color solid;
	background-color: $primary-color;
	color: #ffffff;
}
.scroll-height {
	height: calc(100vh - 100rpx - 380rpx);
}
.scroll-height-2 {
	height: calc(100vh - 100rpx - 280rpx);
}
</style>
